<template>
  <div class="head">
    <div class="head-left">
      <img
        src="https://static2.cnodejs.org/public/images/cnodejs_light.svg"
        alt=""
      /> 
      <input type="text" />
    </div>
    <div class="head-right">
      <span>首页</span>
      <span>新手入门</span>
      <span>API</span>
      <span>关于</span>
      <span>注册</span>
      <span>登录</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
</script>

<style lang="scss">
.head {
  width: 100%;
  height: 60px;
  background-color: #444444;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10%;
  box-sizing: border-box;
  img {
    width: 140px;
    vertical-align: middle;
  }
  input {
    width: 240px;
    height: 30px;
    border-radius: 20px;
    background-color: #888888;
    outline: none;
    border: 0;
    text-indent: 20px;
    margin-left: 20px;
  }
  .head-left {
    display: flex;
    align-items: center;
  }
  .head-right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 400px;
    color: #fff;
  }
}
</style>
